<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="container">

    <counter-item></counter-item>

    <button @click="increment">增加</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vuex@4"></script>
<script type="text/javascript">
    /**
     * (1) 定义component;
     * (2) 定义store;
     * (3) 定义app;
     * @type {any}
     */

    const CounterItem = {
        template: `
          <div>{{ counter }}</div>`,
        computed: {
            counter() {
                return this.$store.state.counter
            }
        }
    }

    const store = Vuex.createStore({
        state() {
            return {
                counter: 1
            }
        },
        mutations: {
            increment(state) {
                state.counter++
            }
        }
    })

    const demoApp = {
        data() {
            return {
                counter: this.$store.state.counter //初始化为state中的值
            }
        },
        computed: {
            // counter() {
            //     return this.$store.state.counter
            // },
            counter:{ // get\set写法
                get(){
                    return this.$store.state.counter
                },
                // set(){
                //
                // }
            }
        },
        components:{
          'counter-item': CounterItem,
        },
        mounted() {

        },
        methods: {
            increment() {
                this.$store.commit('increment')
            }
        }

    }

    Vue.createApp(demoApp)
        .use(store)
        .mount('#container')
</script>

</body>
</html>
